<template>
	<view class="mybutton">
		<button type="primary" :plain="true" @click="yearGet">{{ yearcaption }}</button>
	</view>
	<view class="mybutton">
		<button type="primary" :plain="true" @click="monthGet">{{ monthcaption }}</button>
	</view>
	<view class="mybutton">
		<button type="primary" :plain="true" @click="hourGet">{{ hourcaption }}</button>
	</view>
	<view class="mySiZhu">
		<view class="selectAlert" v-if="!currentYear">请选择年份</view>
		<view class="selectAlert" v-else-if="!currentMonth">请选择月日</view>
		<view v-else="currentYear && currentMonth">
			<view>{{CurrentDateInfo}}</view>
			<view>{{currentSiZhu.getText()}}</view>
			<view class="selectAlert" v-if="!currentHour">未选择时辰</view>
		</view>
	</view>
	<view class="mybutton" style="display: flex;">
		<view style="width: 50%;padding-right: 0.25rem;">
			<button type="default" style="background-color: #8888ff;color: white;font-weight: bold;" @click="submit(true)">男 (乾造)</button>
		</view>
		<view style="width: 50%;padding-left: 0.25rem;">
			<button type="default" style="background-color: #ff8888;color: white;font-weight: bold;" @click="submit(false)">女 (坤造)</button>
		</view>
	</view>
</template>

<script lang="ts">
	import { dateUtil } from '../../common/dateUtil';
	import { GanZhi } from '../../common/ganzhi';
	import { ChinaDate } from '../../common/ChinaDate'
	import { MonthDayItem, HourItem } from '../dategetter/entity'
	import { SiZhu } from '../../common/sizhu';

	export default {
		data() {
			return {
				yearcaption: "年份选择",
				currentYear: undefined as number,
				monthcaption: "月日选择",
				currentMonth: undefined as MonthDayItem,
				hourcaption: "时辰选择",
				currentHour: undefined as HourItem,
				currentSiZhu: undefined as SiZhu,
				CurrentDateInfo: "",
			}
		},
		mounted() {
			this.currentHour = new HourItem();
			this.currentHour.mode = '24小时';
		},
		computed: {},
		methods: {
			yearGet() {
				uni.navigateTo({
					url: "/pages/dategetter/yeargetter",
					events: {
						selected: (year : number) => {
							this.yearSelected(year);
						}
					},
					success: (res) => {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('init', this.currentYear)
					}
				})
			},
			yearSelected(year : number) {
				this.currentYear = year;
				let huajia = GanZhi.getHuaJiaIndexByYear(year);
				let title = year.toString() + GanZhi.getGanZhiTextByHuajia(huajia) + "年（";
				let nowYear = (new Date()).getFullYear();
				if (year <= nowYear) title += (nowYear - year + 1).toString() + "虚岁";
				title += "属" + dateUtil.getYearProperty(year);
				title += GanZhi.getNaYinText(huajia) + "）";
				this.yearcaption = title;
				this.currentMonth = undefined;
				this.monthcaption = "月日选择";
			},
			async monthGet() {
				if (!this.currentYear) {
					await uni.showToast({
						title: "请首先选择年份",
						icon: 'error',
					})
					return;
				}
				let args = this.currentMonth ?? { mode: '公历', year: this.currentYear };
				uni.navigateTo({
					url: "/pages/dategetter/monthdaygetter",
					events: {
						selected: (item : MonthDayItem) => {
							this.monthSelected(item);
						}
					},
					success: (res) => {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('init', args)
					}
				})
			},
			monthSelected(item : MonthDayItem) {
				this.currentMonth = item;
				let title = item.mode + '  ';
				let gldate : Date;
				if (item.mode == '公历') {
					gldate = new Date(this.currentYear, item.monthIndex, item.day);
					title += dateUtil.FormatDate(gldate, "MM月dd日");
				} else {
					let chdate = new ChinaDate(this.currentYear, item.month, item.leapMonth, item.day, 0);
					title += chdate.getMonthText() + chdate.getDayText();
					gldate = chdate.toDate();
				}
				this.monthcaption = title;
				this.currentHour.dayGanzhi = GanZhi.getGanzhiFromDate(gldate, this.currentHour.hour == 23);
			},
			async hourGet() {
				uni.navigateTo({
					url: "/pages/dategetter/hourgetter",
					events: {
						selected: () => {
							this.hourSelected();
						}
					},
					success: (res) => {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('init', this.currentHour)
					}
				})
			},
			hourSelected() {
				//this.currentHour = item;
				this.hourcaption = this.currentHour.getText(hour24 => GanZhi.getDiZhiText(dateUtil.getHour12From24(hour24)));
			},
			getCurrentDateInfo() : string {
				if (!this.currentYear || !this.currentMonth) return;
				let date = new Date(this.currentYear, this.currentMonth.month - 1, this.currentMonth.day);
				if (this.currentMonth.mode == '农历') {
					date = ChinaDate.getDateFromChina(this.currentYear, this.currentMonth.month, this.currentMonth.day);
					console.log(this.currentMonth.month)
				};
				let chinadate : ChinaDate;
				try {
					chinadate = ChinaDate.getChinaDate(date);
				} catch (error) {
					//TODO handle the exception
				}
				let title = dateUtil.FormatDate(date, "yyyy-MM-dd") + "日  " + (chinadate ? chinadate.getMonthText().trim() + chinadate.getDayText() : "超出查询范围");
				return title
			},
			createSiZhu(isMan : boolean) : SiZhu {
				if (!this.currentYear || !this.currentMonth) return;
				let date = new Date(this.currentYear, this.currentMonth.month - 1, this.currentMonth.day, this.currentHour?.hour ?? 0, this.currentHour?.minute ?? 0);
				if (this.currentMonth.mode == '农历') {
					date = ChinaDate.getDateFromChina(this.currentYear, this.currentMonth.month, this.currentMonth.day);
					date.setHours(this.currentHour?.hour ?? 0, this.currentHour?.minute ?? 0);
				};
				return SiZhu.getSiZhu(date, this.currentHour?.hasHour, isMan);
			},
			refreshCurrentInfo() {
				if (!this.currentYear || !this.currentMonth) {
					this.currentSiZhu = undefined;
					this.CurrentDateInfo = "";
					return;
				}
				this.CurrentDateInfo = this.getCurrentDateInfo()
				this.currentSiZhu = this.createSiZhu(true);
			},
			async showErrWindow(errText : string) {
				await uni.showToast({
					icon:'error',
					title: errText,
				});
			},
			async createCheck() : Promise<boolean> {
				if (!this.currentYear) {
					await this.showErrWindow("没有选择年份");
					return false
				}
				if (!this.currentMonth) {
					await this.showErrWindow("没有选择月份");
					return false;
				}
				if (!this.currentHour) {
					await this.showErrWindow("没有选择时辰");
					return false;
				}
				return true;
			},
			async submit(isMan : boolean) {
				if (!await this.createCheck()) return;
				uni.navigateTo({
					url: "/pages/ming/content",
					events: {
						selected: (year : number) => {
							this.currentYear = year;
							this.yearSelected2(year);
						}
					},
					success: (res) => {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('init', this.createSiZhu(isMan))
					}
				})
			}
		},
		watch: {
			currentYear: {
				handler: function () { this.refreshCurrentInfo() },
				deep: true
			},
			currentMonth: {
				handler: function () { this.refreshCurrentInfo() },
				deep: true
			},
			currentHour: {
				handler: function () { this.refreshCurrentInfo() },
				deep: true
			},
		},

		// 页面周期函数--监听页面加载
		onLoad() { },
		// 页面周期函数--监听页面初次渲染完成
		onReady() { },
		// 页面周期函数--监听页面显示(not-nvue)
		onShow() { },
		// 页面周期函数--监听页面隐藏
		onHide() { },
		// 页面周期函数--监听页面卸载
		onUnload() { },
		// 页面处理函数--监听用户下拉动作
		// onPullDownRefresh() { uni.stopPullDownRefresh(); },
		// 页面处理函数--监听用户上拉触底
		// onReachBottom() {},
		// 页面处理函数--监听页面滚动(not-nvue)
		// onPageScroll(event) {},
		// 页面处理函数--用户点击右上角分享
		// onShareAppMessage(options) {},
	}
</script>

<style scoped>
	.mybutton {
		padding: 0.5rem;
	}

	.mySiZhu {
		font-size: 22px;
		padding: 1rem;
		display: flex;
		flex-direction: column;
		color: gray;
		font-weight: bold;
	}

	.selectAlert {
		font-weight: bold;
		font-size: 22px;
		color: gray;
	}
</style>